<template>
    <div class="doctorreviewedit">
        <h2 class="tit">菜单权限编辑</h2>
        <div class = 'main'>
            <p class="title">基本信息</p>
            <Form ref="formInline" :model="info" :rules="infoRules" inline class="formcont">
                <Row>
                    <Col :xs="3" >
                        <i class="req-icon">*</i>权限路径：
                    </Col>
                    <Col :xs="20">
                        <FormItem class="fullItem" prop="name">
                            <Input
                                class="w-input"
                                v-model="info.name"
                                placeholder="请输入权限路径"
                            />
                        </FormItem>
                    </Col>
                </Row>                          
                <Row>
                    <Col :xs="3">
                        <i class="req-icon"></i>备注：
                    </Col>
                    <Col :xs="20">
                        <FormItem class="fullItem" prop="remark">
                            <Input
                                v-model="info.remark"
                                type="textarea"
                                :autosize="{ minRows: 3, maxRows: 3 }"
                                placeholder="备注"
                            />
                        </FormItem>
                    </Col>
                </Row>                           
            </Form>
        </div>
        <div class="butbox">
            <Button type="primary" @click="submit('formInline')" :disabled = 'btuStatus'>
                <Icon type="ios-checkmark" class="icon"/>提交
            </Button>
            <Button @click="reback" style="margin-left: 8px">
                <i class = "iconfont icon-butongyi icon"></i>返回
            </Button>
        </div>
    </div>
</template>
<script>
import api from "@/api/commonApi";
export default {
    data() {
        return {
            id: null,
            info: {
                name: null,
                remark: null
            },
            pageNo: null,
            infoRules: {
                name: [
                    {
                        required: true,
                        message: "权限路径不能为空",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    created() {
        this.id = this.$route.query.id ? this.$route.query.id : null;
        this.pageNo = this.$route.query.pageNo?parseInt(this.$route.query.pageNo):1;
        this.searchKey = this.$route.query.searchKey?this.$route.query.searchKey:"";
        if (this.id) {
            this.$axios
                .post(api.findAuthById, { id: this.id })
                .then(resp => {
                    this.info = resp.data.object;
                })
                .catch(err => {
                    // this.$Message.info("服务器超时，请重新访问")
                });
        }

        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/configuration/admin/user/list",
                title: "帐号权限配置"
            },
            {
                path: "/index/configuration/authorityManagement/list",
                title: "菜单权限"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    methods: {
        submit(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    let subMitObj = {};
                    let noticeMsg = '';
                    if(this.info.id){
                        noticeMsg = '修改'
                    } else {
                        noticeMsg = '新增'
                    }
                    subMitObj.id = this.info.id ? parseInt(this.info.id) : null;
                    subMitObj.name = this.info.name.trim();
                    subMitObj.remark = this.info.remark.trim();
                    this.$axios
                        .post(api.saveAuth, subMitObj)
                        .then(resp => {
                            if (resp.data.code == 1) {
                                this.$Message.error(noticeMsg + "成功");
                                 //   公用方法
                                this.functionJS.queryNavgationTo(
                                    this,
                                    "/index/configuration/authorityManagement/list",
                                    {
                                        pageNo: this.pageNo,
                                        searchKey:this.searchKey
                                    }
                                );

                            } else {
                                this.$Message.error(noticeMsg + "失败，请重试");
                            }
                        })
                        .catch(err => {
                            console.log(err);
                        });
                } else {
                    this.$Message.error("数据不正确");
                }
            });
        },
        reback() {
             //   公用方法
            this.functionJS.queryNavgationTo(
                this,
                "/index/configuration/authorityManagement/list",
                {
                    pageNo: this.pageNo,
                    searchKey:this.searchKey
                }
            );
        }
    }
};
</script>
<style lang="less" scoped>
.doctorreviewedit {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .tit {
        margin:10px 0;
        font-weight:bold;
        text-align:center;
    }
    .main{
        width: 98%;
        display: flex;
        flex-direction: column;
        margin: 10px auto;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        margin-bottom: 20px;
        .title {
            font-size: 20px;
            padding-left: 15px;
            margin-bottom: 20px;
            color: #333;
            height: 40px;
            line-height: 40px;
            background: #ebedf8;         
        }
        .formcont {
            width: 70%;
            margin: 0 auto;
            .suojin {
                margin-left: 10px;
            }
        }
        .w-input {
            width: 100%;
        }
        .req-icon {
            font-size: 18px;
            color: red;
            display: inline-block;
            height: 18px;
            width: 18px;
            text-align: center;
            line-height: 18px;
            vertical-align: middle;
        }
        .fullItem {
            width: 90%;
        }
    }   
    .butbox {
        text-align: center;
        margin: 20px auto;
        .icon {
            font-size: 14px;
            margin-right: 5px;
        }
    }       
}
</style>
